import React, { useState } from "react";

export default function ComplexHookState() {
  const [friends, setFriends] = useState(["kobe", "LiLei"])
  const [students, setStudents] = useState([
    { id: 110, name: "why", age: 20 },
    { id: 111, name: "bbb", age: 20 },
    { id: 120, name: "ccc", age: 20 },
    
  ])

  function addFriends(){
    friends.push("aaa");
  }

  function incrementAge(index) { 
    const newStudents = [...students];
    newStudents[index].age += 1;
    setStudents(newStudents);
  }

  return (
    <div>
      <ul>
        {friends.map((item, index) => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
      <button onClick={e =>{ setFriends([...friends,"tom"])}}>增加朋友</button>
      <button onClick={e => { addFriends() }}>增加朋友</button>
      
      <h2>学生列表</h2>
      <ul>
        {
          students.map((item, index) => {
            return (
              <li key={item.id}>
                <span>名字：{item.name}  年龄：{item.age}</span>
                <button onClick={e =>{ incrementAge(index)}}>age+1</button>
              </li>
            );
          })
        }
      </ul>
    </div>
  );
}
